
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>后台系统</title>
    <!--<link  th:href="@{../static/layui/css/layui.css}"  type="text/css" rel="stylesheet"/>-->
    <link  href="../layui/css/layui.css"  type="text/css" rel="stylesheet"/>
<!--    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>-->
    <script src="../layui/layui.js"></script>
    <script type="text/javascript" src="../js/md5.js"></script>
    <script type="text/javascript" src="../../../js/url.js"></script>
    <style>
        .window{
            /*width: 400px;
            position: absolute;
            margin-left: -200px;
            margin-top: -80px;
            top: 50%;
            left: 50%;
            display: block;
            z-index: 2000;
            background: #fff;
            padding: 20 0;*/
            text-align: center; /*让div内部文字居中*/
            background-color: #fff;
            border-radius: 20px;
            width: 400px;
            height: 299px;
            margin: auto;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        body{
            margin: 0;
            padding: 0;
            overflow: hidden;
            background:url(../css/login.PNG) no-repeat center;
        }
        .denglu{
            width:255px;
            font-size: 22px;
        }
        .row{
            margin-top: 35px;
        }
    </style>
</head>
<body >
<div class="window" style=" height: 330px;">
    <form  class="layui-form"  id="login-form" >
        <div class="row">
            <h2 class="title">合一美容院信息管理平台</h2>
        </div>
        <div class="layui-form-item" style="margin-right: 100px;margin-top: 20px;">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-block">
                <input type="text" name="userCode" required  lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input" id="userCode">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">密   码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="password">
            </div>
        </div>
        <div class="layui-form-item" >
            <label class="layui-form-label">验证码：</label>
            <div class="layui-input-inline">
                <input type="randomCode" name="randomCode" required lay-verify="required" placeholder="验证码" autocomplete="off" class="layui-input" id="randomCode" style="display: inline-block;width: 80px;margin-left: 0px;">
                <img  id="codePic" src="" style="cursor:pointer;width: 100px; height: 30px;" onclick="createNewCode(this)">
            </div>
        </div>
<!--        <div class="layui-form-item" >
            <label class="layui-form-label">请输入密码：</label>
            <div class="layui-input-inline">
                <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input" id="spassword">
            </div>
        </div>-->
        <div class="layui-form-item">
          <!--  <input type="checkbox" name="" title="写作" lay-skin="primary" checked>-->
           <!-- <div style="margin-left: 50px;margin-bottom: 10px;" class="layui-unselect layui-form-checkbox" lay-skin="primary"><span>保持登录7天</span><i class="layui-icon"></i></div>-->
            <div >
                <input type="submit" class="layui-btn denglu" onclick="login(this)" value="登       录"/>
            </div>
        </div>
    </form>


</div>

</body>

<script type="text/javascript">



    layui.use(['jquery', 'laydate', 'layer', 'form'], function () {
        var form = layui.form;
        var $ = layui.$;


        $("#codePic").attr("src",ctx+"/randomCode");




        $(document).ready(function(){
            var password= hex_md5("123456");
           /* $("#password").on("input",function(e){
                //获取input输入的值
                console.log(hex_md5(e.delegateTarget.value));
                $("#password").
            });*/
            //alert(password);
            /*            $("#account").blur(function(){
                            $.ajax({
                                url:'/user/checkAccount.action',
                                type:'post',
                                data:{
                                    account:$("#account").val()
                                },
                                success:function (data) {
                                    if(data.code == 200){
                                        alert("账号可以使用");
                                        $("#account").css("background-color","#00FF00");
                                    }else if(data.code == 404){
                                        alert("账号已被注册");
                                        $("#account").css("background-color","#FF0000");
                                    }
                                }
                            })
                        });*/
        });

    });
    function login(obj) {

        console.log("登录进来一次");
        var $ = layui.$;
        $(obj).attr("disabled", true);

        var userCode = $.trim($('#userCode').val());
        var password = $.trim($('#password').val());
        var randomCode = $.trim($('#randomCode').val());
        password =  hex_md5(password);
        if (userCode == "" || password == "") {
            $("#info").html('用户名或者密码不能为空');
            $(obj).attr("disabled", false);
        } else {
            $.ajax({
                type : 'POST',
                url : '/login/doLogin',
                data : {userCode:userCode,password:password,randomCode:randomCode},
                contentType: "application/x-www-form-urlencoded",
                success : function(data) {
                    if(data=="error"){
                        alert("登陆失败");
                        window.location.reload()
                    }else if(data=="验证码错误"){
                        alert(data);
                        window.location.reload()
                    }else{
                        localStorage.setItem("token", data.token);
                        // location.href = '/index.html';
                        location.href = data.substr(data.lastIndexOf("redirect:") + "redirect:".length);
                    }
                },
                error : function(xhr, textStatus, errorThrown) {
                    var msg = xhr.responseText;
                    var response = JSON.parse(msg);
                    $("#info").html(response.message);
                    $(obj).attr("disabled", false);
                }
            });

        }
    }
    function createNewCode(obj){
        var $ = layui.$;
        // window.location.reload()
        var rnd=RndNum(4);
         $(obj).attr("src",ctx+"/randomCode?rndNum="+rnd);
    }

    //产生随机数函数
    function RndNum(n){
        var rnd="";
        for(var i=0;i<n;i++)
            rnd+=Math.floor(Math.random()*10);
        return rnd;
    }

    //重新渲染表单

    function renderForm(){

        layui.use('form', function(){

            var form = layui.form;
            form.render();

        });

    }


</script>
</html>